<template>
	<view class="uni_box home">
		<navbar title='学情统计' :yin="true">

		</navbar>
		<view class="content">
			<view class="xueone">
				<view class="fenxi">
					<view class="xian"></view>
					<view class="xname">学情分析</view>
					<view class="xian"></view>
				</view>
			</view>
			<view class="xuetwo">
				<view class="jindu">
					<view class="jinview">
						<u-circle-progress active-color="#fa4e4e" width="200" inactive-color="rgba(250, 78, 78, 0.2)" :percent="80">
							<view class="u-progress-content">
								<text class='u-progress-info'>80%</text>
							</view>
						</u-circle-progress>
					</view>
					<text class="shiname">您的视频学习进度为:15% ，超越了 5% 的人</text>
				</view>
				<view class="jindu">
					<view class="jinview">
						<u-circle-progress active-color="rgba(251, 124, 60, 1)" width="200" inactive-color="rgba(251, 124, 60, 0.2)" :percent="80">
							<view class="u-progress-content">
								<text class='u-progress-info'>80%</text>
							</view>
						</u-circle-progress>
					</view>
					<text class="shiname">您的视频学习进度为:15% ，超越了 5% 的人</text>
				</view>
			</view>
			<view class="btwo">
				<view class="btitem">
					<text class="tiname"><text class="tinum">25</text>个</text>
					<text class="zongnum">已学知识点</text>
				</view>
				<view class="btitem">
					<text class="tiname"><text class="tinum twonum">5</text>题</text>
					<text class="zongnum">已做题数</text>
				</view>
				<view class="btitem">
					<text class="tiname"><text class="tinum threenum">9</text>天</text>
					<text class="zongnum">累计学习天数</text>
				</view>
			</view>
			<view class="boruo">
				<text class="boname">近七天学习情况</text>
				<view class="zque">
					<text class="zqueview" style="background: #FFE4D8;"></text>
					<text class="zqname" style="margin-right: 50rpx;">学习视频数</text>

					<text class="zqueview"></text>
					<text class="zqname">做题数</text>
				</view>
				<view class="qview">
					<!-- 创建一个canvas元素作为容器 -->
					<view style="width:100%; height:550rpx"><l-echart ref="chartRef" @finished="initBarChart"></l-echart></view>
					<!-- <canvas id="chart" canvas-id="barChart"></canvas> -->
					
				</view>

				<text class="boname">各科目学习情况</text>
				
				<view class="qview">
					<!-- 创建一个canvas元素作为容器 -->
					<view style="width:100%; height:550rpx;position: relative;"><l-echart ref="chartReftwo" @finished="initBarCharttwo"></l-echart></view>
					<!-- <canvas id="chart" canvas-id="barChart"></canvas> -->
					<view class="cuektwo">
						<view class="xueitem">
							<text class="quanxue"></text>
							<text class="guan">视频观看比： <text class="bi">80%</text> </text>
						</view>
						<view class="xueitem">
							<text class="quanxue" style="background-color: #3C90F7;"></text>
							<text class="guan">题库完成比： <text class="bi" style="color: #3C90F7;">80%</text> </text>
						</view>
					</view>
				</view>
				

				<text class="boname">学情对比</text>
				<view class="zque">
					<text class="zqueview" style="background: #3C90F7;width: 20rpx;height: 2rpx;"></text>
					<text class="zqname" style="margin-right: 50rpx;">全网做题正确率</text>

					<text class="zqueview" style="background: #FD864F;width: 20rpx;height: 2rpx;"></text>
					<text class="zqname">您的做题正确率</text>
				</view>
				<view class="qview">
					<!-- 创建一个canvas元素作为容器 -->
					<view style="width:100%; height:550rpx"><l-echart ref="chartRefthree" @finished="initBarChartthree"></l-echart></view>
					<!-- <canvas id="chart" canvas-id="barChart"></canvas> -->
				</view>
			</view>
		</view>
</view>
</template>

<script>
//    import * as echarts from 'echarts' 
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
export default {
	data() {
		return {
		}
	},
	onLoad() {

	},
	mounted() {
		this.initBarChart(); // 初始化横向柱状图
		this.initBarCharttwo(); // 雷达图
		this.initBarChartthree();//折线图
	},
	onShow() {
	},
	methods: {
		async initBarChart() {
			// const chartDom = document.getElementById('chart'); // 获取canvas元素
			// const myChart = this.$echarts.init(chartDom); // 初始化echarts实例

			// 配置数据及样式
			const option = {
				title: {
					// text: 'World Population'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {},
				grid: {
					left: '0%',
					right: '0%',
					bottom: '10%',
					top:'-2%',
					containLabel: true
				},
				yAxis: {
					type: 'value',
					boundaryGap: [0, 0.01],
					axisLabel: {
						formatter: function(value) {
							return value ;
						}
					},
				},
				xAxis: {
					type: 'category',
					data: ['6.17', '6.118', '6.19', '620', '6.21','6.22', '6.23'],
					axisTick: {  
						show: false,
						lineStyle:{
							color:'#ff6d00' //设置刻度线颜色为红色
						},
						textStyle: {
							color: '#ff6d00'
						}
					},
					nameTextStyle: {
					//y轴上方单位的颜色
					color: "#fff",
					},
					axisLabel: {
					//y轴文字的配置
					textStyle: {
						color: "#666666",
						margin: 15,
					},
					// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
					},
					axisTick: {
					show: false,
					},
					axisLine: {
					//y轴线的颜色以及宽度
					show: false,
					lineStyle: {
						color: "#EEEEEE",
						width: 0.5,
						type: "solid",
					},
					},
					splitLine: {
					//分割线配置
					show: false,
					lineStyle: {
						color: "#EEEEEE",
					},
					},
					
					
				},
				splitLine: {
				//分割线配置
				show: false,
				lineStyle: {
					color: "#ff6d00",
				},
				},
				// label: {
				// 	show: true,   // 显示标签
					
				// 	textStyle: {
				// 		color: '#ff0000'   // 设置文本颜色为红色
				// 	},
				// 	axisLabel: {
				// 		formatter: function(value) {
				// 			return value + '%';
				// 		}
				// 	},
				// },
				series: [
					{
						name: '',
						type: 'bar',//horizontalBar
						color:'#FFE4D8',
						data: [5, 10, 20, 30, 40,50,35],
						itemStyle: {
							color: function(params) {
								return '#FFE4D8'; // 根据索引返回对应位置的颜色
							}
						},
						barWidth: 10, // 柱子宽度
					},
					{
						name: '',
						type: 'bar',//horizontalBar
						color:'#FD864F',
						data: [10, 20, 30, 40, 50,20,35],
						itemStyle: {
							color: function(params) {
								return '#FD864F'; // 根据索引返回对应位置的颜色
							}
						},
						barWidth: 10, // 柱子宽度
					}
					
					// {
					// 	name: '2012',
					// 	type: 'bar',
					// 	data: [19325, 23438, 31000, 121594, 134141, 681807]
					// }
				]
			};

			// 使用配置项生成图表
			// myChart.setOption(option);
			const chart = await this.$refs.chartRef.init(echarts);
            chart.setOption(option)
		},
		async initBarCharttwo() {
			// const chartDom = document.getElementById('chart'); // 获取canvas元素
			// const myChart = this.$echarts.init(chartDom); // 初始化echarts实例

			// 配置数据及样式
			const option = {
				title: {
					text: ''
				},
				// legend: {
				// 	data: ['Allocated Budget', 'Actual Spending']
				// },
				radar: {
					// shape: 'circle',
					indicator: [
					{ name: '科目一', max: 6500,color:'#666666' },
					{ name: '科目二', max: 16000,color:'#666666' },
					{ name: '科目三', max: 30000,color:'#666666' },
					{ name: '科目四', max: 38000,color:'#666666' },
					{ name: '科目五', max: 52000,color:'#666666' },
					{ name: '科目六', max: 25000,color:'#666666' }
					]
				},
				color:['#3C90F7','#FD864F'],
				series: [
					{
					name: 'Budget vs spending',
					type: 'radar',
					data: [
						{
						value: [4200, 3000, 20000, 35000, 50000, 18000],
						name: '数据1'
						},
						{
						value: [5000, 14000, 28000, 26000, 42000, 21000],
						name: '数据2'
						}
					]
					}
				]
				};

			// 使用配置项生成图表
			// myChart.setOption(option);
			const chart = await this.$refs.chartReftwo.init(echarts);
            chart.setOption(option)
		},
		async initBarChartthree() {
			// const chartDom = document.getElementById('chart'); // 获取canvas元素
			// const myChart = this.$echarts.init(chartDom); // 初始化echarts实例

			// 配置数据及样式
			const option = {
			title: {
				text: ''
			},
			tooltip: {
				trigger: 'axis'
			},
			// legend: {
			// 	data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
			// },
			grid: {
				left: '0%',
				right: '5%',
				bottom: '10%',
				top:'-2%',
				containLabel: true
			},
			// toolbox: {
			// 	feature: {
			// 	saveAsImage: {}
			// 	}
			// },
			xAxis: {
				type: 'category',
				boundaryGap: false,
				//y轴文字的配置
				textStyle: {
					color: "#666666",
					margin: 15,
				},
				data: ['6.17', '6.118', '6.19', '620', '6.21','6.22', '6.23'],
			},
			yAxis: {
				type: 'value'
			},
			axisLine: {
			//y轴线的颜色以及宽度
			show: false,
			lineStyle: {
				color: "#EEEEEE",
				width: 0.5,
				type: "solid",
			},
			},
			splitLine: {
			//分割线配置
			show: false,
			lineStyle: {
				color: "#EEEEEE",
			},
			},
			series: [
				{
				name: '全网正确率',
				type: 'line',
				stack: '',
				color:'#FD864F',
				itemStyle: {
					color: function(params) {
						return '#FD864F'; // 根据索引返回对应位置的颜色
					}
				},
				data: [120, 132, 101, 134, 90, 230, 210]
				},
				{
				name: '你的正确率',
				type: 'line',
				stack: '',
				color:'#3C90F7',
				itemStyle: {
					color: function(params) {
						return '#3C90F7'; // 根据索引返回对应位置的颜色
					}
				},
				data: [220, 182, 191, 234, 290, 330, 310]
				}
			]
			};

			// 使用配置项生成图表
			// myChart.setOption(option);
			const chart = await this.$refs.chartRefthree.init(echarts);
            chart.setOption(option)
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}

#chart {
	width: 100%;
	/* 设置画布大小 */
	height: 270px;
}

.content {
	background-color: #fff;
	padding: 50rpx 30rpx;
	.xueone{
		.fenxi{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 50rpx;
			.xian{
				display: inline-block;
				// width: 40%;
				flex: 1;
				height: 1rpx;
				background-color: rgba(251, 124, 60, 0.3);
			}
			.xname{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
				display: inline-block;
				margin: 0 20rpx;
			}
		}
	}
	.xuetwo{
		display: flex;
		flex-direction: row;
		padding: 30rpx 50rpx;
		justify-content: space-between;
		// .jindu{
		// 	display: flex;
		// 	flex-direction: column;
			.jindu{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 46%;
				// .jinview{
				// 	flex-direction: column;
				// 	align-items: center;
				// 	justify-content: center;
				// 	width: 50%;
				// }
				
				.u-progress-content {
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
				.u-progress-dot {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #fb9126;
				}
				
				.u-progress-info {
					padding-left: 16rpx;
					font-family: PingFang SC;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					letter-spacing: 2rpx
				}
			}
			.shiname{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				display: block;
				margin-top: 30rpx;
				text-align: center;
			}
		// }
	}
	.btwo{
		// margin: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		padding-bottom: 40rpx;
		margin: 30rpx 0;
		.btitem{
			width: 33.33%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-right: 1rpx solid #eee;
			.tiname{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #999999;
			}
			.tinum{
				font-weight: 500;
				font-size: 46rpx;
				color: #FA4E4E;
				position: relative;
				margin-right: 5rpx;
				top: 5rpx;
			}
			.zongnum{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #999999;
				display: block;
				margin-top: 15rpx;
			}
			.twonum{
				color: rgba(253, 134, 79, 1);
			}
			.threenum{
				color: rgba(255, 208, 7, 1);

			}
		}
		.btitem:last-child{
			border-right: none;
		}
	}
	.nlone {
		display: flex;
		flex-direction: column;

		.genju {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.zonglv {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 40rpx 0;

			.jdu {
				flex: 1;

			}

			.zongliang {
				margin-left: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
		}

		.datiview {
			display: flex;
			flex-direction: row;
			align-items: center;

			.daitem {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				border-right: 1rpx solid #eee;
				justify-content: center;

				.daleft {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;

					.daval {
						display: inline-block;
						margin-left: 6rpx;
						color: rgba(253, 134, 79, 1);
					}
				}
			}

			.daitem:last-child {
				border-right: none;
			}
		}
	}

	.boruo {
		margin: 50rpx 0 60rpx;

		.boname {
			font-family: PingFang SC;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			display: block;
			text-align: center;

		}

		.zque {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 0;

			.zqueview {
				display: inline-block;
				width: 20rpx;
				height: 14rpx;
				background: #FD864F;
				margin-right: 14rpx;
			}

			.zqname {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
		}
		.qview{
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			margin-bottom: 50rpx;
		}
		.cuektwo{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 40rpx 10%;
			justify-content: space-between;
			.xueitem{
				display: flex;
				flex-direction: row;
				align-items: center;
				.quanxue{
					display: inline-block;
					width: 8rpx;
					height: 8rpx;
					margin-right: 10rpx;
					background-color: #FD864F;
					border-radius: 50%;
				}
				.guan{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
				.bi{
					color: #FD864F;
				}

			}
		}
	}

	.tuilist {
		.tuiitem {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;

			.quan {
				width: 5rpx;
				height: 5rpx;
				background: #FD864F;
				border-radius: 50%;
				display: inline-block;
				margin-right: 18rpx;
			}

			.name {
				max-width: 75%;
				display: inline-block;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #666666;
			}

			.gong {
				margin-left: auto;
				width: 126rpx;
				height: 42rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 5rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}

		}
	}

	// padding-bottom: 150rpx;
}</style>
